import React,{useEffect, useState} from 'react';
import Head from 'next/head';
import {Row,Col, Breadcrumb} from 'antd'; // antd 提供的组件
import Link from "next/link";
import axios from 'axios';

// 自定义组件
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import Lists from '../components/Lists/Lists';
import ResumeCard from '../components/ResumeCard/ResumeCard';
import Advert from '../components/Advert/Advert';
import apiUrl from '../config/apiUrl';


export default function Home(props) {

  const [articleList,setArticleList] = useState(props.data);

  useEffect( () => {
    setArticleList(props.data);
  })

  return (
    <>
      <Head className="header">
        <title>Hot Pot</title>

      </Head>
        <Header />

        
        <Row className="body" type="flex" justify="center" gutter={32}>
          <Col className="body_left" xs={0} sm={0} md={7} lg={5} xl={4} xxl={3}>
            <ResumeCard />
            <Advert />
          </Col>

          
          <Col className="body_right" xs={22} sm={22} md={17} lg={16} xl={14} xxl={10}>
            <Breadcrumb >
                <Breadcrumb.Item><Link  href="/"><a>首页</a></Link></Breadcrumb.Item>
                <Breadcrumb.Item><Link  href="/life"><a>生活</a></Link></Breadcrumb.Item>
            </Breadcrumb>
            <Lists loading={false} articleList={articleList}/>

          </Col>
          
        </Row>

        <Footer />

      



 
    </>
  )
}

Home.getInitialProps =  async (ctx) => {

  const data = await axios.get(apiUrl.getLifeArticleList(4)).then(res => res.data);

  
  return { data:data.data};

}
